<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <title>沟通中</title>
    <link rel="stylesheet" type="text/css" href="../../../static/newcj/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="../../../static/newcj/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="../../../static/newcj/fonts/iconfont.css?v=2016070717">
    <link rel="stylesheet" href="../../../static/js/element-plus/element_plus.css">


    <style>
        [v-cloak] {
            display: none !important;
        }
        .qqFace {
            margin-top: -180px;
            background: #fff;
            padding: 2px;
            border: 1px #dfe6f6 solid;
        }

        .qqFace table td {
            padding: 0px;
        }

        .qqFace table td img {
            cursor: pointer;
            border: 1px #fff solid;
        }

        .qqFace table td img:hover {
            border: 1px #0066cc solid;
        }
        .chat-content{
            margin-top: 10px;
        }
    </style>

</head>
<body>
<div class='fui-page-group' id="app" v-cloak>
    <div class='fui-page chatDetail-page'>
        <div class="chat-header flex">
            <i class="icon icon-toleft t-48"></i>
            <span class="shop-titlte t-30">商店</span>
            <span class="shop-online t-26"></span>
<!--            <span class="into-shop">进店</span>-->
        </div>
        <div class="fui-content navbar" style="padding:1.2rem 0 1.35rem 0;">
            <div class="chat-content">
<!--                <p style="display: none;text-align: center;padding-top: 0.5rem" id="more"><a>加载更多</a></p>-->
<!--                <p class="chat-time"><span class="time">2022-01-18</span></p>-->
                <div v-for="item in message_list">
                    <div class="chat-text section-left flex" v-if="item.to_uid == uid">
                        <span class="char-img" style="background-image: url('../../../static/newcj/img/123.jpg')"></span>
                        <span class="text"><i class="icon icon-sanjiao4 t-32"></i>{{ item.content }}</span>
                    </div>
                    <div class="chat-text section-right flex" v-else>
                        <span class="text"><i class="icon icon-sanjiao3 t-32"></i>{{ item.content }}</span>
                        <span class="char-img" style="background-image: url('../../../static/newcj/img/132.jpg')"></span>
                    </div>
                </div>

            </div>
        </div>
        <div class="fix-send flex footer-bar">
            <i class="icon icon-emoji1 t-50"></i>
            <input class="send-input t-28" maxlength="200" id="saytext" v-model="msg_content">
            <input type="file" name="pic" id="file" style="display: none">
            <i class="icon icon-add image_up t-50" style="color: #888;"></i>
            <span class="send-btn" @click="send_message">发送</span>
        </div>
    </div>
</div>
<script src="/plugin/webman/push/push.js"> </script>
<script src="../../../static/js/element-plus/vue@next.js"></script>
<script src="../../../static/js/element-plus/element_plus.js"></script>
<script src="../../../static/js/element-plus/zh-cn.js"></script>
<script src="../../../static/newcj/js/jquery.min2.js"></script>
<script src="../../../static/newcj/js/dist/flexible/flexible_css.debug.js"></script>
<script src="../../../static/newcj/js/dist/flexible/flexible.debug.js"></script>
<script src="../../../static/qqFace/js/jquery.qqFace.js"></script>
<script>
    let API_URL = "<?=htmlspecialchars($api_url)?>";
    let WS_URL = "<?=htmlspecialchars($ws_url)?>";
    ElementPlus.locale(ElementPlus.lang.zhCn)
    const App = {
        data() {
            return {
                uid:'',
                to_uid:'',
                msg_content:'',
                type:1,//1是普通文本，2是图片
                message_list:[]
            };
        },
        created: function () {
            let uid = "<?=htmlspecialchars($from_id)?>";
            let to_uid = "<?=htmlspecialchars($to_id)?>";
            this.uid = uid
            this.to_uid = to_uid
            this.get_chat_history()
            this.build_ws()
        },
        watch: {
            // 将页面卷到底部
            message_list: function() {
                // nextTick：等待DOM更新完成后再执行回调函数
                this.$nextTick(() => {
                    let container = this.$el.querySelector('.chat-content')
                    container.scrollTop = container.scrollHeight // 将页面卷到底部
                })
            }
        },
        methods: {
            //建立ws连接
            build_ws(){
                let that = this
                // 建立连接
                let connection = new Push({
                    url: WS_URL, // websocket地址
                    app_key: 'dcfa8e47b8ac675d6b9a080e981fdc2b',
                    auth: '/plugin/webman/push/auth' // 订阅鉴权(仅限于私有频道)
                });
                // 浏览器监听user-1频道的消息，也就是用户uid为1的用户消息
                let user_channel = connection.subscribe(that.uid);
                // 当user-1频道有message事件的消息时
                user_channel.on('message', function(data) {
                    // data里是消息内容
                    console.log(data);
                    that.get_chat_history()
                });
            },
            //获取聊天记录
            get_chat_history(){
                let that = this;
                $.ajax({
                    url: API_URL + "get_chat_history",
                    data: {
                        uid:that.uid,
                        to_uid:that.to_uid,
                    },
                    dataType: "json",
                    type: "post",
                    success: function(res) {
                        if(res.code === 200){
                            that.message_list = res.data.data
                        }
                    }
                });
            },
            //发送消息
            send_message(){
                let that = this;
                $.ajax({
                    url: API_URL + "send_chat",
                    data: {
                        msg_content:that.msg_content,
                        uid:that.uid,
                        to_uid:that.to_uid,
                        type:that.type
                    },
                    dataType: "json",
                    type: "post",
                    success: function(res) {
                        if(res.code === 200){
                            that.msg_content = ''
                            that.get_chat_history()
                        }
                    }
                });
            },
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");



    //
    // /**
    //  *根据时间戳格式化为日期形式
    //  */
    // function mydate(nS){
    //
    //     return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    // }
    // var to_id = {$to_id};
    //
    // var from_head = '';
    //
    // var to_head = '';
    //
    // var online = 0;
    // var to_name = '';
    // var API_URL = "http://127.0.0.1:8888/api/chat/";
    // var ws = new WebSocket("ws://127.0.0.1:8282");
    // ws.onmessage = function (e) {
    //     var message = eval("(" + e.data + ")");
    //     switch (message.type) {
    //         case "init":
    //             var bild = '{"type":"bind","from_id":"' + from_id + '"}';
    //             ws.send(bild);
    //             get_head(from_id, to_id);
    //             get_name(to_id);
    //             message_load();
    //             var online = '{"type":"online","to_id":"' + to_id + '","from_id":"' + from_id + '"}';
    //             ws.send(online);
    //             changeNoRead();
    //             return;
    //         case "text":
    //             if (to_id == message.from_id) {
    //
    //                 $(".chat-content").append(' <div class="chat-text section-left flex"><span class="char-img" style="background-image: url(' + to_head + ')"></span> <span class="text"><i class="icon icon-sanjiao4 t-32"></i>' + replace_em(message.data) + '</span> <span></span></div>');
    //
    //                 $(".chat-content").scrollTop(3000);
    //
    //                 changeNoRead();
    //             }
    //             return;
    //         case "say_img":
    //
    //             $(".chat-content").append(' <div class="chat-text section-left flex"><span class="char-img" style="background-image: url(' + to_head + ')"></span> <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img width="120em" height="120em" src="../../uploads/' + message.img_name + '"></span> </div>');
    //
    //             $(".chat-content").scrollTop(3000);
    //
    //             changeNoRead();
    //             return;
    //         case "save":
    //             save_message(message);
    //             if (message.is_read == 1) {
    //                 online = 1;
    //                 $(".shop-online").text("在线");
    //             } else {
    //                 online = 0;
    //                 $(".shop-online").text("不在线");
    //             }
    //             return;
    //         case  "online":
    //             if (message.status == 1) {
    //                 online = 1;
    //                 $(".shop-online").text("在线");
    //
    //             } else {
    //                 online = 0;
    //                 $(".shop-online").text("不在线");
    //
    //             }
    //
    //
    //     }
    // }

    // $(".send-btn").click(function () {
    //
    //     var text = $(".send-input").val();
    //
    //     if (text == '') {
    //         return;
    //     }
    //
    //     var message = '{"data":"' + text + '","type":"say","from_id":"' + from_id + '","to_id":"' + to_id + '"}';
    //
    //     $(".chat-content").append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i>' + replace_em(text) + '</span> <span class="char-img" style="background-image: url(' + from_head + ')"></span> </div>');
    //
    //     $(".chat-content").scrollTop(3000);
    //
    //     ws.send(message);
    //
    //     $(".send-input").val("");
    //
    // })


    function save_message(message) {
        $.post(
            API_URL + "save_message",
            message,
            function () {

            }, 'json'
        )
    }

    function changeNoRead() {
        $.post(
            API_URL + "changeNoRead",
            {"from_id": from_id, "to_id": to_id},
            function () {

            }, 'json'
        )
    }

    function get_head(from_id, to_id) {
        $.post(
            API_URL + "get_head",
            {"from_id": from_id, "to_id": to_id},
            function (e) {
                console.log(e);
                from_head = e.from_head;
                to_head = e.to_head;
            }, 'json'
        );
    }

    function get_name(to_id) {
        $.post(
            API_URL + "get_name",
            {"uid": to_id},
            function (e) {
                to_name = e.to_name;
                $(".shop-titlte").text("与" + to_name + "聊天中...");
                //console.log(e);
            }, 'json'
        );
    }

    function message_load() {
        $.post(
            API_URL + "load",
            {"from_id": from_id, "to_id": to_id},
            function (e) {
                $.each(e, function (index, content) {

                    if (from_id == content.from_id) {
                        if (content.type == 2) {
                            $(".chat-content").append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src="../../uploads/' + content.content + '"></span> <span class="char-img" style="background-image: url(' + from_head + ')"></span> <span>' + mydate(content.time) + '</span></div>');

                        } else {
                            $(".chat-content").append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i>' + replace_em(content.content) + '</span> <span class="char-img" style="background-image: url(' + from_head + ')"></span><span>' + mydate(content.time) + '</span> </div>');
                        }
                    } else {
                        if (content.type == 2) {

                            $(".chat-content").append(' <div class="chat-text section-left flex"><span class="char-img" style="background-image: url(' + to_head + ')"></span> <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img width="120em" height="120em" src="../../uploads/' + content.content + '"></span><span>' + mydate(content.time) + '</span> </div>');

                        } else {

                            $(".chat-content").append(' <div class="chat-text section-left flex"><span class="char-img" style="background-image: url(' + to_head + ')"></span> <span class="text"><i class="icon icon-sanjiao4 t-32"></i>' + replace_em(content.content) + '</span> <span>' + mydate(content.time) + '</span></div>');
                        }
                    }
                })
                $(".chat-content").scrollTop(3000);
            }, 'json'
        );
    }


    $(function () {

        $('.icon-emoji1').qqFace({

            assign: 'saytext',

            path: '../../../static/qqFace/arclist/'	//表情存放的路径

        });

        $(".sub_btn").click(function () {

            var str = $("#saytext").val();

            $("#show").html(replace_em(str));

        });

    });


    //查看结果

    function replace_em(str) {

        str = str.replace(/\</g, '&lt;');

        str = str.replace(/\>/g, '&gt;');

        str = str.replace(/\n/g, '<br/>');

        str = str.replace(/\[em_([0-9]*)\]/g, '<img src="../../../static/qqFace/arclist/$1.gif" border="0" />');

        return str;

    }


    $(".image_up").click(function () {
        $("#file").click();
    })

    $("#file").change(function () {

        formdata = new FormData();
        formdata.append('from_id', from_id);
        formdata.append('to_id', to_id);
        formdata.append('online', online);
        formdata.append('file', $("#file")[0].files[0]);

        $.ajax({
            url: API_URL + "uploadimg",
            type: 'POST',
            cache: false,
            data: formdata,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function (data, status, xhr) {
                console.log(data);

                if (data.status == 'ok') {

                    $(".chat-content").append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src="../../uploads/' + data.img_name + '"></span> <span class="char-img" style="background-image: url(' + from_head + ')"></span> </div>');

                    $(".chat-content").scrollTop(3000);

                    var message = '{"data":"' + data.img_name + '","from_id":"' + from_id + '","to_id":"' + to_id + '","type":"say_img"}';

                    $("#file").val("");
                    ws.send(message);

                } else {
                    console.log(data.status);
                }


            }
        });


    })

</script>
</body>
</html>
